{% extends 'base.html' %}

{% block stylesheet %}
{% endblock %}

{% block content %}
<nav class="navbar block is-dark fs-display-none">
    <div class="navbar-brand">
        {% if cam_data.enabled != cam_data.available %}
        <a data-filter="enabled" class="navbar-item is-tab is-active filter">
            <span class="icon-text">
                <span class="icon"><i class="fas fa-plug-circle-check"></i></span><span><strong> {{
                        cam_data.enabled
                        }}</strong> enabled</span></span></a>
        <a data-filter="all" class="navbar-item is-tab filter">
            <span class="icon-text"><span class="icon"><i class="fas fa-users-viewfinder"></i></span><span>
                    All cameras</span></span></a>
        {%else%}
        <p class="navbar-item"><span class="icon-text"><span class="icon"><i
                        class="fas fa-users-viewfinder"></i></span><span>Detected {{ cam_data.total
                    }} cameras</span></p>
        {% endif %}
        <a class="navbar-burger">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div class="navbar-menu" id="refresh-menu">
        <div class="navbar-end">
            <div class="navbar-item">
                <div class="field is-grouped">
                    <div class="control has-icons-left is-hidden-mobile">
                        <input class="input is-rounded" id="select_number_of_columns" type="number" min="1" max="6"
                            size="3" value="{{number_of_columns}}" title="Number of columns" />
                        <div class="icon is-small is-left">
                            <i class="fas fa-table-columns"></i>
                        </div>
                    </div>
                    <div class="control has-icons-left is-expanded">
                        <input class="input is-rounded" id="select_refresh_period" type="number" min="0" max="1200"
                            size="3" value="{{refresh_period}}" title="Refresh (seconds)" />
                        <div class="icon is-small is-left">
                            <i class="fa-solid fa-rotate"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="navbar-item dropdown is-hoverable is-right">
                <div class="dropdown-trigger">
                    <button class="button is-fullwidth is-danger is-outlined" aria-haspopup="true"
                        aria-controls="dropdown-menu">
                        <span class="icon is-small">
                            <i class="fas fa-power-off"></i>
                        </span>
                        <span>Restart</span>
                    </button>
                </div>
                <div class="dropdown-menu" id="restart-menu" role="menu">
                    <div class="dropdown-content">
                        <a data-restart="cameras" class="dropdown-item">
                            <span class="icon is-small">
                                <i class="fas fa-video"></i>
                            </span>
                            <span>connection to cameras</span>
                        </a>
                        <a data-restart="rtsp_server" class="dropdown-item">
                            <span class="icon is-small">
                                <i class="fas fa-solid fa-network-wired"></i>
                            </span>
                            <span>mtx-server</span>
                        </a>
                        <a data-restart="cam_data" class="dropdown-item">
                            <span class="icon is-small">
                                <i class="fas fa-rotate"></i>
                            </span>
                            <span>reload camera data</span>
                        </a>
                        <a data-restart="all" class="dropdown-item">
                            <span class="icon is-small">
                                <i class="fas fa-solid fa-cloud-arrow-down"></i>
                            </span>
                            <span>clear cache and reconnect</span>
                        </a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<article id="connection-lost" class="message is-danger" style="display:none;">
    <div class="message-body">
        <span class="icon-text">
            <span class="icon">
                <i class="fas fa-house-signal"></i>
            </span>
            <span>Lost connection to the bridge...</span>
        </span>
    </div>
</article>
<div id="alert" class="container is-hidden">
</div>
<div class="cameras columns is-multiline">
    {% if cam_data.cameras %}
    {% for cam_uri,camera in cam_data.cameras.items() %}
    <div id="{{ cam_uri }}" class="camera column {{'is-hidden' if not camera.enabled}}"
        data-enabled="{{camera.enabled}}" data-connected="{{camera.connected}}" data-battery="{{camera.is_battery}}">
        <div class="card">
            <header class="card-header fs-display-none">
                <div class="card-header-title">
                    <span class="icon status {{'enabled' if camera.enabled}}" data-cam="{{cam_uri}}">
                        <i class="fas fa-circle-stop" aria-hidden="true"></i>
                    </span>
                    {{camera.nickname}}
                    {% if camera.substream %}
                    <span class="icon" title="Sub-stream of {{ camera.nickname }}">
                        <i class="fas fa-object-ungroup" aria-hidden="true"></i>
                    </span>
                    {% endif %}
                    {% if camera.camera_info %}
                    {% if camera.camera_info.sdParm and camera.camera_info.sdParm.status == "1"%}
                    <div class="dropdown is-hoverable">
                        <span class="icon">
                            <i class="fas fa-sd-card" aria-hidden="true"></i>
                        </span>
                        <div class="dropdown-menu" role="menu">
                            <div class="dropdown-content">
                                <p class="menu-label dropdown-item">{{
                                    (camera.camera_info.sdParm.capacity|int/1024)|round(2) }} GB SD Card</p>
                                <progress class="progress is-medium dropdown-item"
                                    value="{{(camera.camera_info.sdParm.capacity|int-camera.camera_info.sdParm.free|int)/camera.camera_info.sdParm.capacity|int}}"
                                    max="1">15%</progress>
                                <span class="dropdown-item">{{
                                    (camera.camera_info.sdParm.free|int/1024)|round(2) }} GB Available</span>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% if camera.camera_info.channelResquestResult.audio == "1"%}
                    <span class="icon" title="Audio Enabled">
                        <i class="fas fa-volume-high" aria-hidden="true"></i>
                    </span>
                    {% endif %}
                    {% endif %}
                    {% if camera.is_battery %}
                    <span class="icon battery">
                        <i class="fas fa-battery-empty" aria-hidden="true"></i>
                    </span>
                    {% endif %}
                    <span class="icon motion is-hidden" title="Motion Detected">
                        <i class="fas fa-person-running" aria-hidden="true"></i>
                    </span>
                </div>
                <span class="drag_handle" draggable="true"></span>
                <button class="card-header-icon toggle-details" data-cam="{{cam_uri}}" title="Camera details">
                    <span class="icon">
                        <i class="fas fa-circle-info" aria-hidden="true"></i>
                    </span>
                </button>
            </header>
            <div class="card-image has-text-centered">
                <figure class="image">
                    {% if show_video and (camera.on_demand or camera.enabled) %}
                    {% set is_webrtc = webrtc and (video_format == "webrtc" or camera.webrtc and video_format == "kvs")
                    %}
                    <video data-cam="{{ cam_uri }}" {% if not is_webrtc %}data-src="{{ camera.hls_url }}stream.m3u8" {%
                        endif %}
                        class="{% if is_webrtc %}webrtc{% else %}hls{% endif %} loading-preview refresh_img placeholder {{ 'connected' if camera.connected }}"
                        muted playsinline {{ "autoplay" if autoplay and camera.connected else "preload=none" }}
                        poster="{{ camera.img_url or 'static/loading.svg' }}">
                    </video>
                    <i class="fas"></i>
                    {% elif camera.img_url or camera.connected or (camera.on_demand and camera.enabled) %}
                    <img class="refresh_img loading-preview {{'connected' if camera.connected}}"
                        src="{{ camera.img_url or 'static/loading.svg' }}" data-cam="{{cam_uri}}" width="100%" />
                    {% else %}
                    <section class="section has-background-black has-text-white no-preview"
                        data-on-demand="{{camera.on_demand}}">
                        <span class="icon is-medium">
                            <i class="fas fa-video-slash"></i>
                        </span>
                        <p>Preview not available</p>
                    </section>
                    {% endif %} {% if not show_video %}
                    <div class="card-content is-overlay has-text-right cam-overlay">
                        <button class="button is-primary update-preview" data-cam="{{cam_uri}}" title="Update preview">
                            <span class="icon is-small">
                                <i class="fas fa-arrows-rotate"></i>
                            </span>
                        </button>
                        <span class="age" data-age={{camera.img_time}}></span>
                    </div>
                    {% endif %}
                </figure>
            </div>
            <div class="content table-container is-hidden">
                <table class="table">
                    <tbody>
                        {% for key, value in camera.items()%}
                        {% if key == "camera_info" and value %}
                        {% for cam_info, cam_val in value.items() %}
                        <tr>
                            <td>{{ cam_info }}</td>
                            <td><code>{{ cam_val }}</code></td>
                        </tr>
                        {% endfor %}
                        {% else %}
                        <tr>
                            <td>{{ key }}</td>
                            <td>
                                {% if value and (key == "thumbnail" or key.endswith('_url') )%}
                                <a href="{{ value }}" title="{{ value }}">{{ value|truncate(40, True,
                                    '...') }}</a>
                                {% else %}
                                <code>{{ value }}</code>
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <footer class="card-footer fs-display-none">
                <div class="card-footer-item dropdown is-up is-hoverable">
                    <div class="dropdown-trigger">
                        <span class="icon is-small">
                            <i class="fas fa-sliders" aria-hidden="true"></i>
                        </span>
                        Controls
                    </div>
                    <div class="dropdown-menu" role="menu">
                        <div class="dropdown-content cam-control" data-cam="{{cam_uri}}">
                            <p class="menu-label dropdown-item"><i class="fas fa-power-off"></i> Power</p>
                            <div class="buttons are-small is-centered">
                                <button class="button" data-cmd="power" data-payload="on">On</button>
                                <button class="button" data-cmd="power" data-payload="off">Off</button>
                                <button class="button" data-cmd="power" data-payload="restart">Restart</button>
                            </div>
                            <p class="menu-label dropdown-item"><i class="fas fa-video"></i> Stream</p>
                            <div class="buttons are-small is-centered">
                                <button class="button" data-cmd="state" data-payload="enable">
                                    <span class="icon is-small">
                                        <i class="fas fa-circle-check" aria-hidden="true"></i></span>
                                    <span>Enable</span></button>
                                <button class="button" data-cmd="state" data-payload="disable"> <span
                                        class="icon is-small">
                                        <i class="fas fa-circle-xmark" aria-hidden="true"></i></span>
                                    <span>Disable</span></button></button>
                            </div>
                            <div class="buttons are-small is-centered">
                                <button class="button" data-cmd="state" data-payload="start"> <span
                                        class="icon is-small">
                                        <i class="fas fa-circle-play" aria-hidden="true"></i></span>
                                    <span>Start</span></button>
                                <button class="button" data-cmd="state" data-payload="stop"> <span
                                        class="icon is-small">
                                        <i class="fas fa-circle-pause" aria-hidden="true"></i></span>
                                    <span>Stop</span></button>
                            </div>
                            <p class="menu-label dropdown-item"><i class="fas fa-moon"></i> Night Vision</p>
                            <div class="buttons are-small is-centered">
                                <button class="button" data-cmd="night_vision" data-payload="on">On</button>
                                <button class="button" data-cmd="night_vision" data-payload="off">Off</button>
                                <button class="button" data-cmd="night_vision" data-payload="auto">Auto</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer-item dropdown is-up is-hoverable is-right">
                    <div class="dropdown-trigger">
                        <span class="icon is-small">
                            <i class="fas fa-photo-film" aria-hidden="true"></i>
                        </span>
                        Streams
                    </div>
                    <div class="dropdown-menu" role="menu">
                        <div class="dropdown-content">
                            <p class="menu-label dropdown-item">Video Streams</p>
                            {% if camera.webrtc_url %}
                            <a href="{{camera.webrtc_url}}" class="dropdown-item icon-text stream-link" target="_blank">
                                <span class="icon is-small"><i class="fas fa-file-code" aria-hidden="true"></i>
                                </span><span>WebRTC</span>{% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span> {% endif %}</a>
                            {% endif %}
                            <a href="{{camera.hls_url}}" class="dropdown-item icon-text stream-link" target="_blank">
                                <span class="icon is-small"><i class="fas fa-file-code" aria-hidden="true"></i>
                                </span><span>HLS</span>{% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span> {% endif %}</a>
                            <a href="{{camera.rtmp_url}}" class="dropdown-item icon-text stream-link">
                                <span class="icon is-small"><i class="fas fa-file-video" aria-hidden="true"></i>
                                </span><span>RTMP</span> {% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span> {% endif %}</a>
                            <a href="{{camera.rtsp_url}}" class="dropdown-item icon-text stream-link">
                                <span class="icon is-small"><i class="fas fa-file-video" aria-hidden="true"></i>
                                </span><span>RTSP</span>{% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span>{% endif %}</a>
                            {% if camera.rtsp_fw_enabled %}
                            <a href="{{camera.rtsp_url}}fw" class="dropdown-item icon-text stream-link" target="_blank">
                                <span class="icon is-small"><i class="fas fa-file-video" aria-hidden="true"></i></span>
                                <span>FW_RTSP</span></a>
                            {% endif %}
                            {% if camera.boa_url %}
                            <a href="{{camera.boa_url}}" class="dropdown-item icon-text" target="_blank">SD
                                Card</a>
                            {% endif %}
                            <p class="menu-label dropdown-item">Snapshots</p>
                            <a href="{{camera.snapshot_url}}" class="dropdown-item icon-text" target="_blank">
                                <span class="icon is-small"><i class="fas fa-file-image" aria-hidden="true"></i>
                                </span><span>RTSP Snapshot</span>{% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span>{% endif %}</a>
                            <a href="{{camera.thumbnail_url}}" class="dropdown-item icon-text" target="_blank">
                                <span class="icon is-small"><i class="fas fa-file-image" aria-hidden="true"></i>
                                </span><span>API Thumbnail</span>{% if api %}<span class="icon">
                                    <i class="fas fa-lock"></i>
                                </span>{% endif %}</a>
                        </div>
                    </div>
                </div>

            </footer>
        </div>
    </div>
    {% endfor %}
</div>
<div class="preview-toggle buttons is-centered fs-display-none">
    <button data-action="snapshot" class="button {% if not show_video %} is-active{% endif %}">
        <span class="icon is-small"><i class="fas fa-image"></i></span>
        <span>Snapshot</span>
    </button>
    <div class="dropdown is-hoverable">
        <div class="dropdown-trigger">
            <button data-action="video" data-action="" class="button{% if show_video %} is-active{% endif %}"
                aria-haspopup="true" aria-controls="video-menu">
                <span class="icon is-small"><i class="fas fa-film"></i></span>
                <span>Video</span>
                <span class="icon is-small">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu" id="video-menu" role="menu">
            <div class="dropdown-content">
                {% if webrtc %}
                <a data-action="webrtc" class="dropdown-item {{'is-active' if video_format == 'webrtc'}}"
                    id="webrtc-toggle">
                    WebRTC
                </a>
                {% endif %}
                <a data-action="hls" class="dropdown-item {{'is-active' if video_format == 'hls'}}" id="hls-toggle">
                    HLS
                </a>
                <hr class="dropdown-divider">
                <a data-action="autoplay" class="dropdown-item" id="toggle-autoplay">
                    <span class="icon is-small"><i class="fas fa-square{{ '-check' if autoplay}}"></i></span>
                    auto-play
                </a>
            </div>
        </div>
    </div>
</div>
<div class="fullscreen">
    <button class="button is-small">
        <span class="icon is-small">
            <i class="fas fa-maximize"></i>
        </span>
    </button>
</div>
{% endif %}
{% endblock %}


{% block api_info %}
{% if api %}
<p>
    API key: <code>{{ api }}</code>
</p>
{% else %}
<span class="icon-text">
    <span class="icon"><i class="fas fa-triangle-exclamation"></i></span><span>WebUI auth is
        disabled.</span></span>
{% endif %}
{% endblock %}
{% block javascript %}
{% if api %}
<script>
    function addApiKey() {
        document.querySelectorAll('a.stream-link').forEach(function (link) {
            var href = link.getAttribute('href');
            var updatedHref = href.replace(/^(\w{4,5}):\/\//, function (match, protocol) {
                return protocol + '://' + encodeURIComponent('wb') + ':' + encodeURIComponent('{{api}}') + '@';
            });
            link.setAttribute('href', updatedHref);
        });
        document.querySelectorAll('video.hls').forEach(function (sourceElement) {
            sourceElement.dataset.src = sourceElement.dataset.src.replace(/^https?:\/\//, function (match) {
                return match + encodeURIComponent('wb') + ':' + encodeURIComponent('{{api}}') + '@';
            });
        });
        document.removeEventListener('DOMContentLoaded', addApiKey);
    }
    document.addEventListener('DOMContentLoaded', addApiKey);
</script>
{% endif %}
<script src="static/site.js"></script>
{% if show_video %}
{% if (webrtc and video_format == "webrtc") or video_format =="kvs" %}
<script src="static/webrtc.js"></script>
{% else %}
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
{% endif %}
{% endif %}
{% endblock %}